<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../../css/swiper.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<style>
.catList {
	overflow: hidden;
	height: 2.2rem;
}
.catList .swiper-slide {
	width: auto;
	padding: 0 0.6rem;
	color: #333;
	font-size: 0.6rem;
	line-height: 2.2rem;
	text-align: center;
	position: relative;
}
.catList .swiper-slide:before {
	content: "";
	position: absolute;
	left: 0.6rem;
	right: 0.6rem;
	bottom: 0.2rem;
	height: 2px;
	background: #E73451;
	opacity: 0;
	visibility: hidden;
}
.catList .swiper-slide.active {
	color: #E73451;
}
.catList .swiper-slide.active:before {
	opacity: 1;
	visibility: visible;
}
.filterBtn {
	height: 1.8rem;
	width: 2.5rem;
	background: url(../../image/common/04.png) no-repeat center center;
	background-size: auto 0.8rem;
}
</style>
</head>

<body>
	<div id="topBox">
		<header class="aui-bar aui-bar-nav aui-bar-light" id="header">
			<div class="aui-pull-left back" tapmode onClick="api.closeWin();"></div>
			<div class="aui-title"></div>
			<div class="aui-pull-right headRightBtn" tapmode onClick="openSearch();"><img src="../../image/common/07.png" alt=""></div>
		</header>
		<div class="aui-flex-col aui-flex-middle aui-flex-between bg-white">
			<div class="catList flex-auto">
				<div class="swiper-container">
					<div class="swiper-wrapper" id="cat-tab">
					</div>
				</div>
			</div>
			<div class="filterBtn" tapmode onclick="togFilter();"></div>
		</div>
	</div>

<script type="text/x-dot-template" id="data_tpl">
{{ for(var i in it) { }}
<div class="swiper-slide {{= isCurrentCat(it[i].class_id) }}" data-catId="{{= it[i].class_parent_id }}" data-subCatId="{{= it[i].class_id }}" tapmode onClick="changeGodCat({{= i}});">{{= it[i].class_name }}</div>
{{ } }}
</script>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript">
var pageTitle;
var PARAM_INFO;
    apiready = function() {
        api.parseTapmode();
		var header = $api.byId('topBox');
        $api.fixStatusBar(header);
        var headerH = $api.offset(header).h;
        api.openFrame({
            name: 'product_list_frm',
            url: 'product_list_frm.html',
            rect: {
                x: 0,
                y: headerH,
                w: 'auto',
                h: 'auto'
			},
			bgColor: '#f5f5f5',
			bounces: true,
			useWKWebView:true,
            pageParam: api.pageParam
        });
		PARAM_INFO = api.pageParam;
		if(PARAM_INFO.pageTitle){
			$$('.aui-title').text(PARAM_INFO.pageTitle);
		}
		getSubCat();
    };
	function getSubCat(){
		api.ajax({
			url: BASE_URL + 'App/Select/sortLists',
			method: 'post',
			data: {
				values: {
					class_id: PARAM_INFO.catId
				}
			}
		},function(ret, err){
			if (ret) {
				if(ret.code == 1){
					var tpl = $$('#data_tpl').html();
					var tempFn = doT.template(tpl);
					$$('#cat-tab').html(tempFn(ret.data));
					api.parseTapmode();
					sliderInit();
					var activeIndex = $$('#cat-tab .active').index();
					catSwiper.slideTo(activeIndex);
				}else{
					toast(ret.msg);
				}
			}
		});
	}

//顶部分类滑动
function sliderInit() {
	catSwiper = new Swiper('.catList .swiper-container', {
		freeMode: true,
		slidesPerView: 'auto',
		freeModeSticky: true
	});
}
//
function isCurrentCat(n){
	var txt = '';
	if(n==PARAM_INFO.subCatId){
		txt = 'active';
	}
	return txt;
}
//切换分类
function changeGodCat(ind){
	$$('#cat-tab > div').removeClass('active').eq(ind).addClass('active');
	var subCatId = $$('#cat-tab > div.active').data('subCatId');
	catSwiper.slideTo(ind);
	api.execScript({
		frameName: 'product_list_frm',
		script:'changeSubCat('+ subCatId +');'
	});
}
//展开筛选
function togFilter(){
	api.execScript({
		frameName: 'product_list_frm',
		script: 'togFilter();'
	});
}
//跳转搜索
function openSearch(){
	api.openWin({
		name: 'search_win',
		url: 'search_win.html'
	});
}
</script>
</html>
